<!--
  普通组件的注册使用
    组件注册的两种方式:
      1.局部注册: 只能在注册的组件内使用
        (1)创建.vue文件(三个组成部分)
            在components里面进行组件内容的创建
        (2)在使用的组件内导入并注册
            先导入需要注册的组件
                import 组件对象 from '.vue文件路径'
                import HmHeader from '.vue文件路径'
            再对组件进行局部注册
                export default{
                  //局部注册
                  components: {
                    组件名: 组件对象,
                    HmHeader: HmHeader,
                  }
                }
      2.全局注册: 所有的组件内都能使用
         (1)创建.vue文件(三个组成部分)
            在components里面进行组件内容的创建
         (2)在main.js中进行全局注册
            //导入需要进行全局注册的组件
            import myButton from './components/myButton'
            //调用 Vue.component进行全局注册
            Vue.component('组件名' , 组件对象)
            Vue.component('myButton' , HmButton)
    组件使用:
      当成html标签使用   <组件名></组件名>
    注意:
      组件名用大驼峰命名法: HmHeader
-->

<!--模板-->
<template>
  <div class="app">
<!--使用-->
    <my-button></my-button>
    <!--头部组件-->
    <myheader></myheader>
    <!--主体组件-->
    <mymain></mymain>
    <!--底部组件-->
    <foot></foot>
  </div>

</template>
<script>
  //导入
  import myheader from './components/myheader.vue'
  import mymain from './components/mymain.vue'
  import foot from './components/foot.vue'
  import MyButton from "@/components/myButton.vue";
  //注册
  export default {
    components: {
      MyButton,
      myheader: myheader,
      mymain: mymain,
      foot: foot
    }
  }
</script>
<!--样式-->
<style scoped>
.app {
  width: 600px;
  height: 700px;
  background-color: skyblue;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}
</style>
